<template>
  <div class="evaluate">
    <van-nav-bar class="page-nav-bar navbar" title="评价">
      <van-icon
        slot="left"
        name="arrow-left"
        color="#000"
        size="22"
        @click="$router.push('/my')"
      ></van-icon>
    </van-nav-bar>
    <van-tabs v-model="active" line-width="70" line-height="2" color="#333">
      <van-tab color="#000000" title="待评价商品">
        <van-card
          v-for="v in wlist"
          :key="v.id"
          :num="v.num"
          :price="v.shop.price"
          desc="颜色：白色"
          :title="v.shop.title"
          :thumb="v.shop.photo"
        >
          <template #footer>
            <van-button size="small" type="warning" @click="btn(v.id)"
              >评价</van-button
            >
          </template>
        </van-card>
      </van-tab>
      <van-tab title="已评价商品">
        <van-card
          :num="list[0].num"
          :price="list[0].shop.price"
          desc="颜色：白色"
          :title="list[0].shop.title"
          :thumb="list[0].shop.photo"
          v-if="ypShow"
        >
          <template #footer>
            <van-cell-group>
              <van-field label="评论内容:" :value="datas.content" readonly />
              <van-field
                label="评论星级:"
                :value="datas.appraise + '星'"
                readonly
              />
            </van-cell-group>
          </template>
        </van-card>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { getBuyListById } from "@/api/My";
export default {
  data() {
    return {
      active: "",
      wlist: {},
      ylist: {},
      datas: {},
      list: {},
      ypShow: false,
    };
  },
  created() {
    this.getBuyListById();
    if (this.$route.params.datas) {
      this.datas = this.$route.params.datas;
      this.list = this.$route.params.list;
      this.ypShow = true;
      // this.delBuyListById();
    } else {
      this.datas = {};
      this.list = {};
    }
    console.log(this.datas);
    console.log(this.list);
  },
  methods: {
    // 获取待评价商品
    async getBuyListById() {
      try {
        const { data } = await getBuyListById({
          userId: this.$store.state.user.UserInfo.id,
        });
        console.log(data);
        if (!data.isComment) {
          this.wlist = data;
        } else {
          this.ylist = data;
        }
        console.log(data);
      } catch (error) {
        console.log(error);
      }
    },
    // async delBuyListById() {
    //   try {
    //     if (this.datas.id) {
    //       const res = await delBuyListById({
    //         id: this.list[0].id,
    //       });
    //       console.log(res);
    //     }
    //   } catch (error) {
    //     console.log(error);
    //   }
    // },
    btn(id) {
      this.$router.push({
        name: "addevaluate",
        params: {
          id: id,
        },
      });
    },
  },
};
</script>

<style scoped lang='less'>
/deep/.van-tabs__line {
  bottom: 30px !important;
}
/deep/.van-tabs__wrap {
  height: 60px;
}
.van-multi-ellipsis--l2 {
  margin-top: 10px;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 5px;
}
.van-button--warning {
  width: 66px;
}
// .van-card__desc {
//   margin-top: 30px;
// }
</style>
